<template>
    <div>
        <!-- 共用头部组件 -->
        <common-header
            headerTitle="退换货订单"
            :hasBack="true"
            :hasHome="true"
        ></common-header>
        <!-- 共用头部组件 -->

        <!-- 共用页面滚动组件 -->
        <common-scroll
            :scrollStyle="scrollStyle"
            :isLoadMore="true"
            :data="orderList"
            @pullup="loadMore"
        >

            <div
                class="order-empty-tips"
                v-if="orderList.length == 0"
            >{{emptyTips}}</div>

            <!-- 订单列表组件 -->
            <!-- <div class="order-item">
                <div class="order-num-status">
                    <span class="order-num">订单号：1231213213</span>
                    <span class="order-status">处理中</span>
                </div>
                <div class="goods-info">
                    <div class="goods-img-box">
                        <img
                            class="goods-img"
                            src="@/assets/images/home/goods-list-img.png"
                        />
                    </div>
                    <div class="goods-info-box">
                        <div class="goods-name">蕊珂雪绒花提亮焕采眼霜</div>
                        <div class="goods-price">￥30.00</div>
                    </div>
                </div>
                <div class="order-info">共1件商品 合计：￥30.00</div>
            </div>
            <div class="order-item">
                <div class="order-num-status">
                    <span class="order-num">订单号：1231213213</span>
                    <span class="order-status">已退货</span>
                </div>
                <div class="goods-info">
                    <div class="goods-img-box">
                        <img
                            class="goods-img"
                            src="@/assets/images/home/goods-list-img.png"
                        />
                    </div>
                    <div class="goods-info-box">
                        <div class="goods-name">蕊珂雪绒花提亮焕采眼霜</div>
                        <div class="goods-price">￥30.00</div>
                    </div>
                </div>
                <div class="order-info">共1件商品 合计：￥30.00</div>
            </div>
            <div class="order-item">
                <div class="order-num-status">
                    <span class="order-num">订单号：1231213213</span>
                    <span class="order-status">已换货</span>
                </div>
                <div class="goods-info">
                    <div class="goods-img-box">
                        <img
                            class="goods-img"
                            src="@/assets/images/home/goods-list-img.png"
                        />
                    </div>
                    <div class="goods-info-box">
                        <div class="goods-name">蕊珂雪绒花提亮焕采眼霜</div>
                        <div class="goods-price">￥30.00</div>
                    </div>
                </div>
                <div class="order-info">共1件商品 合计：￥30.00</div>
            </div> -->
            <!-- 订单列表组件 -->

        </common-scroll>
        <!-- 共用页面滚动组件 -->
    </div>
</template>

<script>
import CommonHeader from '@/components/Header'
import CommonScroll from '@/components/Scroll'
export default {
    name: 'RefundOrder',
    components: {
        CommonHeader,
        CommonScroll
    },
    data () {
        return {
            scrollStyle: {
                top: "1.11rem",
                left: "0",
                right: "0",
                bottom: "0"
            },
            orderList: [],
            nowPage: 1,
            totalPage: 1,
            isLoading: false,
            emptyTips: '正在全力加载中...'
        }
    }
}
</script>

<style lang="stylus" scoped>
.order-empty-tips
    height 2rem
    line-height 2rem
    text-align center
    font-size 0.33rem
    color #999
.order-item
    background #fff
    margin-bottom 0.18rem
    .order-num-status
        display flex
        align-items center
        justify-content space-between
        height 1.11rem
        padding 0 0.32rem
        border-bottom 1px solid #e5e5e5
        box-sizing border-box
        .order-num
            font-size 0.33rem
            color #333
        .order-status
            font-size 0.33rem
            color #d7463c
    .goods-info
        display flex
        align-items center
        height 2.68rem
        padding 0 0.32rem
        .goods-img-box
            width 1.85rem
            height 1.85rem
            overflow hidden
            border 1px solid #e5e5e5
            box-sizing border-box
            .goods-img
                width 100%
                height 100%
        .goods-info-box
            flex 1
            min-width 1px
            margin-left 0.18rem
            .goods-name
                font-size 0.38rem
                color #333
                white-space nowrap
                overflow hidden
                text-overflow ellipsis
            .goods-price
                margin-top 0.18rem
                font-size 0.33rem
                color #d7463c
            .goods-detail
                font-size 0.33rem
                color #666
                margin-top 0.18rem
                display -webkit-box
                -webkit-box-orient vertical
                overflow hidden
                -webkit-line-clamp 2
                word-break break-all
                line-height 0.5rem
                height 0.98rem
    .order-info
        height 0.9rem
        line-height 0.9rem
        text-align right
        padding 0 0.32rem
        font-size 0.33rem
        color #333
        border-top 1px solid #e5e5e5
        border-bottom 1px solid #e5e5e5
        box-sizing border-box
</style>
